<template>
    <div class="app-container">
        <el-form :inline="true" ref="queryRef" :rules="rules" label-position="right" :model="params" label-width="200px">
            <div class="form-inline">
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="业务对象：" class="form-item" prop="majorProjectCategory">
                            <el-select v-model="params.majorProjectCategory" placeholder="请选择" class="form-select"
                                clearable>
                                <el-option v-for="item in majorProjectCategoryOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="类型：" class="form-item" prop="cipvType">
                            <el-select v-model="params.cipvType" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in cipvTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="设防情况：" class="form-item" prop="fortification">
                            <el-select v-model="params.fortification" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in fortificationOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="年代：" class="form-item" prop="years">
                            <el-select v-model="params.years" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row justify="end">
                    <el-form-item class="bottom-button">
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button type="primary" @click="onRest">重置</el-button>
                    </el-form-item>
                </el-row>
            </div>
        </el-form>

        <!-- tab -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="饼状图" name="first">
                <!-- echarts图表 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="businessObject">
                            <h4>业务对象</h4>
                            <div id="businessObject-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="years">
                            <h4>年代</h4>
                            <div id="years-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="fortification">
                            <h4>设防情况</h4>
                            <div id="fortification-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="柱状图" name="second">
                <!-- echarts图表 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="businessObject">
                            <h4>业务对象</h4>
                            <div id="businessObject-bar" style="width:100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="years">
                            <h4>年代</h4>
                            <div id="years-bar" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="fortification">
                            <h4>设防情况</h4>
                            <div id="fortification-bar" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
// 引入接口
import { majorProjectsCsVulnerability } from "@/api/compreVisualAnalysis/compreVisualAnalysis.js";
// 引入echarts
import * as echarts from "echarts";
import { dataYearChange, yearData, dataLifeFortificationChange, lefeFortificationData } from "../changeData.js"
// 当前对象实例
const { proxy } = getCurrentInstance();

const data = reactive({
    // 表单参数
    params: {
        majorProjectCategory: "",//业务对象
        cipvType: "", //类型
        fortification: "", //设防情况
        years: "",//年代
    },
    rules: {
        majorProjectCategory: [
            { required: false, message: '请选择', trigger: 'change' }
        ],
        cipvType: [
            { required: false, message: '请选择', trigger: 'change' }
        ],
        fortification: [
            { required: false, message: '请选择', trigger: 'change' }
        ],
        years: [
            { required: false, message: '请选择', trigger: 'change' }
        ],
    },
    majorProjectCategoryOptions: [
        {
            value: '输油/气管线',
            label: '输油/气管线'
        }, {
            value: '核电站',
            label: '核电站'
        }, {
            value: '水库大坝',
            label: '水库大坝'
        }, {
            value: '其他重大工程',
            label: '其他重大工程'
        }
    ],
    fortificationOptions: [
        //候选值为：请选择、未设防、6度、7度、8度、9度、自设防、其他
        {
            value: '未设防',
            label: '未设防'
        },
        {
            value: '6度',
            label: '6度'
        }, {
            value: '7度',
            label: '7度'
        }, {
            value: '8度',
            label: '8度'
        }, {
            value: '9度',
            label: '9度'
        }, {
            value: '自设防',
            label: '自设防'
        }, {
            value: '其他',
            label: '其他'
        }
    ],
    yearsOptions: [
        {
            value: '1978年以前',
            label: '1978年以前'
        }, {
            value: '1978-1989年',
            label: '1978-1989年'
        }, {
            value: '1989-2001年',
            label: '1989-2001年'
        }, {
            value: '2001年以后',
            label: '2001年以后'
        }, {
            value: '全部',
            label: '全部'
        }
    ],
    cipvTypeOptions: [
        {
            value: '压水堆核电站',
            label: '压水堆核电站'
        }, {
            value: '沸水堆核电站',
            label: '沸水堆核电站'
        }, {
            value: '重水堆核电站',
            label: '重水堆核电站'
        }, {
            value: '快中子增殖反应堆',
            label: '快中子增殖反应堆'
        }, {
            value: '其他',
            label: '其他'
        }
    ],
})
const {
    params,
    fortificationOptions,
    yearsOptions,
    cipvTypeOptions,
    majorProjectCategoryOptions,
    rules
} = toRefs(data);

// 当前tab
const activeName = ref('first')
// tab切换事件
const handleClick = (tab, event) => {
    console.log(tab, event)
     onSearch();
}

//建筑物易损性综合统计
const onSearch = () => {
    let query = params.value
    proxy.$modal.loading('加载中...');
    majorProjectsCsVulnerability(query).then((res) => {
        proxy.$modal.closeLoading();
        if (res.code === 200) {
            console.log(res)
            //饼状图
            buildChartBusinessObjectPie(res.data.majorProjectCategory)
            buildChartYearsPie(res.data.years)
            buildChartFortificationPie(res.data.fortification)

            //柱状图
            buildChartBusinessObjectBar(res.data.majorProjectCategory)
            buildChartYearsBar(res.data.years)
            buildChartFortificationBar(res.data.fortification)
        }
    }).catch(err => {
        proxy.$modal.closeLoading();
        console.log(err);
    });
};

let m_chartPie = null
let m_chartBar = null
// 饼状图
//业务对象businessObject-pie
const buildChartBusinessObjectPie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        pieData.push({
            name: key,
            value: data[key]
        })
    })
    echarts.init(document.getElementById('businessObject-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('businessObject-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            bottom: 10,
            left: 'center',

        },
        color: ['#fbbd00', '#5a99d3', '#a3a3a3', '#e97c30'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    m_chartPie.setOption(pieOption);
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}

//年代years-pie
const buildChartYearsPie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        dataYearChange(pieData,data,key)
        // pieData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('years-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('years-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            //orient: 'vertical',
            bottom: 10,
            left: 'center',
            data:yearData()
        },
        color: ['#9479c3', '#5ad8a6', '#5b8ff9', '#f6bd16'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    }
    m_chartPie.setOption(pieOption);
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}

//设防情况fortification-pie
const buildChartFortificationPie = (data) => {
    const keys = Object.keys(data)
    const pieData = []
    keys.forEach(key => {
        dataLifeFortificationChange(pieData,data,key)
        // pieData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('fortification-pie')).dispose() ;
    var m_chartPie = echarts.init(document.getElementById('fortification-pie'));
    var pieOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            enterable: true,
            formatter (res) {
              const dom = '<div>'+`${res.data.name}`+ '<br/>'+ `数量：${res.data.value}(个)` + '<br/>' + `占比：${res.percent}(%)` + '</div>'
              return dom
            }
        },
        legend: {
            //orient: 'vertical',
            bottom: 10,
            left: 'center',
            data:lefeFortificationData()
        },
        color: ['#5ad8a6', '#9479c3', '#5b8ff9', '#f6bd16', "#5ad8a6", '#f17676'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    }
    m_chartPie.setOption(pieOption);
    window.addEventListener('resize', () => {
        m_chartPie.resize();
    });
}

//折线图
//业务对象businessObject-bar
const buildChartBusinessObjectBar = (data) => {
    const keys = Object.keys(data)
    const barData = []
    keys.forEach(key => {
        barData.push({
            name: key,
            value: data[key]
        })
    })
    echarts.init(document.getElementById('businessObject-bar')).dispose() ;
    var m_chartBar = echarts.init(document.getElementById('businessObject-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: keys,
            axisLabel: {
                interval:0,
            },
        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    normal: {
                        color: function (params) {
                          let colorList = ['#fbbd00', '#5a99d3', '#a3a3a3', '#e97c30'];
                          let colorItem = colorList[params.dataIndex];
                          return colorItem;
                        }
                    }
                }
            }
        ]
    }
    m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}

//年代years-bar
const buildChartYearsBar = (data) => {
    const keys = Object.keys(data)
    const barData = []
    keys.forEach(key => {
        dataYearChange(barData,data,key)
        // barData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('years-bar')).dispose() ;
    var m_chartBar = echarts.init(document.getElementById('years-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: yearData(),
            axisLabel: {
                interval:0,
                rotate:20
            },
        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    normal: {
                        color: function (params) {
                          let colorList = ['#9479c3', '#5ad8a6', '#5b8ff9', '#f6bd16'];
                          let colorItem = colorList[params.dataIndex];
                          return colorItem;
                        }
                    }
                }
            }
        ]
    }
    m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}

//设防情况fortification-bar
const buildChartFortificationBar = (data) => {
    const keys = Object.keys(data)
    const barData = []
    keys.forEach(key => {
        dataLifeFortificationChange(barData,data,key)
        // barData.push({
        //     name: key,
        //     value: data[key]
        // })
    })
    echarts.init(document.getElementById('fortification-bar')).dispose() ;
    var m_chartBar = echarts.init(document.getElementById('fortification-bar'));
    var barOption = {
        // title: {
        //     text: '易损性数据个数',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: lefeFortificationData(),
            axisLabel: {
                interval:0,
            },
        },
        yAxis: {
            type: 'value',
            name:'数量/个'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    normal: {
                        color: function (params) {
                          let colorList = ['#5ad8a6', '#9479c3', '#5b8ff9', '#f6bd16', "#5ad8a6", '#f17676'];
                          let colorItem = colorList[params.dataIndex];
                          return colorItem;
                        }
                    }
                }
            }
        ]
    }
    m_chartBar.setOption(barOption);
    window.addEventListener('resize', () => {
        m_chartBar.resize();
    });
}

//重置
const onRest = () => {
    proxy.resetForm("queryRef")
    onSearch();
};

// 挂载
onMounted(() => {
    onSearch()
});
</script>

<style lang="scss" scoped>
.form-inline {
    .el-form-item {
        margin-right: 0;
    }
}

.businessObject,
.years,
.fortification {
    //background: #fff;
    //box-shadow: 0 0 15px #4986bf;
    border: 1px solid #ccc;
    border-radius: 8px;
    opacity: 1;

    h4 {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        //font-family: Microsoft YaHei;
        border-bottom: 1px solid #f3f3f3;
        padding: 15px 0;
        margin: 0;
        cursor: pointer;

        /*CSS伪类用法*/
        //div:after,
        &:before {
            content: "";
            height: 22px;
            width: 7px;
            background: #107ce5;
            border-radius: 0 4px 4px 0;
            display: inline-block;
            margin-right: 15px;
            vertical-align: text-top;
        }

    }
}
</style>

